@import 'splitpanes/dist/splitpanes.css';

html {
  --at-apply: font-sans;
  overflow-y: scroll;
  overscroll-behavior: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

html.reduce-motion,
html.reduce-motion * {
  transition: none !important;
  animation: none !important;
}

html.dark {
  color-scheme: dark;
}

body {
  font-size: 16px;
  /* font-family: 'Roboto Mono, Menlo, Consolas, monospace'; */
}

body::-webkit-scrollbar {
  display: none;
}

/* Splitpanes */
.splitpanes__splitter {
  position: relative;
}
.splitpanes__splitter:before {
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  transition: opacity 0.4s ease;
  z-index: 1;
}
.splitpanes__splitter:hover:before {
  background: #8881;
  opacity: 1;
}
.splitpanes--vertical > .splitpanes__splitter {
  min-width: 0 !important;
  width: 0 !important;
  --at-apply: border-r border-base;
}
.splitpanes--horizontal > .splitpanes__splitter {
  min-height: 0 !important;
  height: 0 !important;
  --at-apply: border-t border-base;
}
.splitpanes--vertical > .splitpanes__splitter:before {
  left: -5px;
  right: -4px;
  height: 100%;
}
.splitpanes--horizontal > .splitpanes__splitter:before {
  top: -5px;
  bottom: -4px;
  width: 100%;
}

/* Overrides Floating Vue */
html .v-popper--theme-dropdown .v-popper__inner,
html .v-popper--theme-tooltip .v-popper__inner {
  --at-apply: 'bg-white text-black rounded border border-base shadow';
  box-shadow: 0 6px 30px #0000001a;
}

html.dark .v-popper--theme-dropdown .v-popper__inner,
html.dark .v-popper--theme-tooltip .v-popper__inner {
  --at-apply: 'bg-#121212 text-white';
}

#devtools-app .v-popper--theme-tooltip .v-popper__arrow-inner,
#devtools-app .v-popper--theme-dropdown .v-popper__arrow-inner {
  visibility: visible;
  --at-apply: 'border-white';
}

#devtools-app.dark .v-popper--theme-tooltip .v-popper__arrow-inner,
#devtools-app.dark .v-popper--theme-dropdown .v-popper__arrow-inner {
  --at-apply: 'border-#121212';
}

#devtools-app .v-popper--theme-tooltip .v-popper__arrow-outer,
#devtools-app .v-popper--theme-dropdown .v-popper__arrow-outer {
  --at-apply: 'border-gray/20';
}

.v-popper--theme-tooltip.v-popper--shown,
.v-popper--theme-tooltip.v-popper--shown * {
  transition: none !important;
}

.v-popper--theme-tooltip {
  --at-apply: $ui-z-max-override;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: var(--c-border);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb {
  background: #8881;
  transition: background 0.2s ease;
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8885;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-track {
  background: var(--c-border);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb {
  background: #8881;
  transition: background 0.2s ease;
  border-radius: 1px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8885;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar {
  /* Support Firefox */
  scrollbar-width: none;
}

/* Shikiji */
/* refer: https://shikiji.netlify.app/guide/dual-themes#class-based-dark-mode */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
